<template>
  <div class="container">
    <div class="header">
      <img class="header-bg" src="@/assets/images/xm/bg_main.png" alt="">
      <div class="header-main">
        <img class="back" @click="loginOut" src="@/assets/images/xm/back.png" alt="">
        <div class="title">天空秒</div>
      </div>
    </div>
    <div class="bg-color"></div>
    <div class="user-data">
      <div class="right">
        <div class="avatar">
          <div class="border"></div>
          <img class="user-pic" :src="headImg" alt="">
        </div>
        <div>
          <span v-if="finish==1" style="color: chartreuse">在线</span>
          <span v-else style="color: red">离线</span>
          | {{ nickName }}
        </div>
        <div class="name">{{ endTime }}</div>
      </div>
      <div class="user-main">
        <div class="bot">
          <div class="bot-bor">
            <img @click="getQrCodeV1" class="login-on" src="@/assets/images/xm/qrCode.png" alt="">
          </div>
          <div class="bot-bor">
            <img @click="renew" class="login-on" src="@/assets/images/xm/add.png" alt="">
          </div>
          <div class="bot-bor">
            <img @click="getUserLogin" class="login-on" src="@/assets/images/xm/relogin.png" alt="">
          </div>
          <div class="bot-bor">
            <img @click="clearKey" class="login-on" src="@/assets/images/xm/clean.png" alt="">
          </div>
        </div>
      </div>
    </div>

    <div class="mask" v-show="qrCodeHide">
      <div class="qr-code">
        <img class="qr-bg" src="@/assets/images/xm/bg_qr.png" alt="">
        <div>
          <div class="code" id = "qrCodeUrl" ref="qrCodeUrl"></div>
          <span class="code-text">倒计时:{{ seconds }}</span>
        </div>
        <img class="close" @click="closeQrCode" src="@/assets/images/xm/close.png" alt="">
      </div>
    </div>

  </div>
</template>

<script>
import {MessageBox, Indicator, Toast} from 'mint-ui'
import QRCode from "qrcodejs2";

export default {

  created () {
    this.cdKey = localStorage.getItem('cdKey')
    this.session = localStorage.getItem('session')
    this.getUserByCdKey()
  },
  data () {
    return {
      timer: '',
      wxId: '',
      cdKey: '',
      headImg: '',
      endTime: '',
      nickName: '',
      finish: '',
      deviceId: '',
      qrCodeUrl: '',
      uuid: '',
      seconds: 120,
      qrCodeHide: false,
      //getQrCodeUrl: 'http://127.0.0.1:9990/api'
      getQrCodeUrl: 'http://123.129.217.73:9999/api'
    }
  },
  methods: {
    renew () {
      MessageBox.prompt('请输入卡密').then(({value, action}) => {
        if (value) {
          Indicator.open({
            text: '正在续费中...',
            spinnerType: 'fading-circle'
          })
          let param = {
            session: this.session,
            newCdKey: value
          }
          this.$axios({
            url: this.getQrCodeUrl + '/cdkAddNew',
            method: 'get',
            params: param
          }).then(res => {
            if (res.data.code === 200 && res.data.data.code === 200) {
              Toast.success(res.data.data.msg)
              this.getUserByCdKey()
            } else {
              Toast(res.data.data.msg)
            }
            Indicator.close()
          })
        }
      })
    },
    loginOut () {
      MessageBox.confirm('确定退出登入吗?').then(action => {
        sessionStorage.setItem('userLoginOn', '')
        this.$router.push('/loginIndex')
      })
    },
    getUserLogin () {
      if (this.wxid !== null && this.wxid !== '') {
        MessageBox.confirm('确定重新登入吗?').then(action => {
          Indicator.open({
            text: '重新登入中...',
            spinnerType: 'fading-circle'
          })
          this.$axios({
            url: this.getQrCodeUrl + '/getAwake?session=' + this.session,
            method: 'get'
          }).then(res => {
            if (res.data.code === 200 && res.data.data.code === 200) {
              Toast('唤醒成功,请到手机上点击确认')
            } else {
              Toast(res.data.data.msg)
            }
            Indicator.close()
          })
        })
      } else {
        Toast({
          message: '请先扫码登入',
          duration: 1500,
          position: 'middle'
        })
      }
    },
    clearKey () {
      if (this.wxid !== '' && this.wxid !== null) {
        MessageBox.confirm('确定解除绑定吗?').then(action => {
          Indicator.open({
            text: '解除绑定中...',
            spinnerType: 'fading-circle'
          })
          this.$axios({
            url: this.getQrCodeUrl + '/cleanUser?session=' + this.session,
            method: 'get'
          }).then(res => {
            Toast('清除成功')
            this.getUserByCdKey()
            Indicator.close()
          })
        })
      } else {
        Toast({
          message: '请先扫码登入',
          duration: 1500,
          position: 'middle'
        })
      }
    },
    getUserByCdKey () {
      let par = {
        session: this.session
      }
      this.$axios({
        url: this.getQrCodeUrl + '/getUserByCdKey',
        method: 'get',
        params: par
      }).then(res => {
        if (res.data.code === 200 && res.data.data.code === 200) {
          this.wxId = res.data.data.data.wxId
          this.cdKey = res.data.data.data.cdKey
          this.headImg = res.data.data.data.image
          this.nickName = res.data.data.data.nickName
          this.endTime = res.data.data.data.endTime
          this.finish = res.data.data.data.wxStatus
          this.deviceId = res.data.data.data.deviceId
          console.log(this.wxId)
        } else {
          if (res.data.code === 2003) {
            MessageBox.alert(`尊敬的用户，${res.data.message}`).then(action => {
            })
            this.$router.push({
              path: '/loginIndex'
            })
          }
        }
      })
    },
    creatQrCode (text) {
      // eslint-disable-next-line no-new
      document.getElementById('qrCodeUrl').innerHTML = ''
      new QRCode(this.$refs.qrCodeUrl, {
        text: text, // 需要转换为二维码的内容
        width: 150,
        height: 150,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    getQrCodeV1 () {
      this.qrCodeHide = true
      this.$axios({
        url: this.getQrCodeUrl + '/getQrCodeV1?session=' + this.session,
        method: 'get'
      }).then(res => {
        if (res.data.code === 200 && res.data.data.code === 200) {
          this.qrCodeUrl = res.data.data.data.qrCode;
          this.qrCodeUrl = this.qrCodeUrl.replace("http://api.asilu.com/qrcode/?t=",'')
          this.qrCodeUrl = this.qrCodeUrl.replace("&size=250",'')
          console.log(this.qrCodeUrl)
          this.creatQrCode(this.qrCodeUrl)
          this.countDown(res.data.data.data.uuId)
        } else {
          MessageBox.alert(res.data.data.msg).then(action => {
          })
        }
      })
    },
    countDown (uuid) {
      clearInterval(this.timer)
      this.seconds = 120
      this.timer = setInterval(() => {
        let param = {
          uuid: uuid,
          session: this.session
        }
        this.$axios({
          url: this.getQrCodeUrl + '/getLoginStatus',
          method: 'get',
          params: param
        }).then(res => {
          if (res.data.code === 200 && res.data.data.code === 200) {
            if (res.data.data.data.status === 2) {
              clearInterval(this.timer)
              this.qrCodeHide = false
              this.getUserByCdKey()
              MessageBox.alert(`登录成功,请查看文件传输助手`).then(action => {
              })
            }
          }
        })
        this.seconds -= 1
        if (this.seconds < 10) {
          this.seconds = '0' + this.seconds
        }
        if (this.seconds == 0) {
          clearInterval(this.timer)
          MessageBox.alert(`登录失败`).then(action => {
          })
        }
      }, 1000)
    },
    closeQrCode () {
      clearInterval(this.timer)
      this.qrCodeHide = false
    }
  }
}
</script>

<style lang="scss" scoped>
.container {

  .bg-color {
    position: fixed;
    width: 750px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    background: #3887BE;
    z-index: -1;
  }

  .header {
    width: 750px;
    height: 146px;
    position: relative;
    // overflow: hidden;
    .header-bg {
      width: 750px;
    }

    .header-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      width: 750px;
      height: 126px;
      position: absolute;
      left: 0;
      top: 0;

      .back {
        width: 30px;
        height: 30px;
      }

      .title {
        font-size: 35px;
        color: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      div {
        width: 200px;
        height: 60px;

        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        color: #2b0ed4;
        font-weight: 700;
      }

      .out {
        font-size: 30px;
        color: #fff;
      }
    }
  }

  .user-data {
    padding: 20px 34px;
    position: relative;
    .user-bg {
      width: 100%;
      height: 100%;
    }

    .right {
      .avatar {
        width: 160px;
        height: 160px;
        position: relative;
        justify-content: space-between;
        overflow: hidden;
        border-radius: 50%;
        .border {
          width: 160px;
          height: 160px;
          background-color: #fff;
        }

        .user-pic {
          position: absolute;
          left: 0;
          top: 0;
          padding: 1px;
          width: 160px;
          height: 160px;
          border-radius: 50%;
        }
      }
    }

    .left {
      .name {
        max-width: 550px;
        font-size: 30px;
        color: #fff;
        margin-top: 20px;
        word-wrap: break-word;
        text-align: center;
      }

      .id {
        margin: 26px 0;
        font-size: 28px;
        color: #f0f0f0;
      }

      .copy {
        font-size: 28px;
        margin: 0;
        padding: 0;
        border: 0;
        color: #fff;
        background-color: rgba(255, 255, 255, 0);
      }
    }

    .user-main {
      position: absolute;
      width: 100%;
      top: 350px;
      left: 0;
      display: flex;
      flex-direction: column;
      align-items: center;

      .left {
        .name {
          max-width: 550px;
          font-size: 30px;
          color: #fff;
          margin-top: 20px;
          word-wrap: break-word;
          text-align: center;
        }

        .id {
          margin: 26px 0;
          font-size: 28px;
          color: #f0f0f0;
        }

        .copy {
          font-size: 28px;
          margin: 0;
          padding: 0;
          border: 0;
          color: #fff;
          background-color: rgba(255, 255, 255, 0);
        }
      }

      .bot {
        width: 100%;
        padding: 0 40px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-around;
        margin-top: 10px;

        .bot-bor {
          border-radius: 15px;
          width: 45%;
          height: 300px;
          display: flex;
          align-items: center;
          flex-direction: column;
          margin:  10px 10px;
          .login-on {
            margin-top: 25px;
            // width: 148px;
            height: 250px;
          }

          div {
            margin-top: 24px;
            font-size: 32px;
            color: #333333;
          }
        }
      }

      .open-upload {
        width: 400px;
      }
    }
  }

  .ul {
    padding: 0 34px;

    .li {
      margin-bottom: 20px;

      .li-t {
        display: flex;
        align-items: center;

        .img-1 {
          width: 58px;
          height: 58px;
        }

        div {
          margin-left: 24px;
          font-size: 32px;
          color: #333333;
        }
      }

      .li-b {
        width: 100%;
        padding-left: 84px;
        font-size: 28px;
        line-height: 42px;
        color: #999999;
        margin-top: 8px;
      }
    }
  }

  .mask {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 750px;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 10;

    .qr-code {
      position: absolute;
      width: 750px;
      text-align: center;
      .qr-bg {
        width: 80%;

      }

      .close {
        width: 65px;
        height: 65px;
        position: absolute;
        right: 8em;
        top: 17em;
      }

      .code {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 540px;
      }

      .code-text {
        font-size: 30px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 900px;
      }
    }

    .upload {
      width: 535px;
      height: 593px;
      border-radius: 24px;
      background-color: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 80px 0;

      .upload-on {
        position: absolute;
        width: 100%;
        height: 76px;
        top: 80px;
        left: 0;
        opacity: 0;
      }

      .close {
        width: 80px;
        height: 80px;
        position: absolute;
        right: -70px;
        top: -80px;
      }

      .icon {
        height: 76px;
      }

      .video-name {
        font-size: 24px;
        color: #555;
      }

      .textarea {
        background-color: #e7e8e8;
        height: 150px;
        width: 450px;
        border: 0;
        font-size: 28px;
        padding: 12px;
        line-height: 36px;
      }
    }
  }
}
</style>
